<template>
  <div class="modal-overlay" @click.self="closeForm">
    <div class="modal">
      <header class="modal-header">
        <h2>{{ isEditMode ? '编辑政策' : '新增政策' }}</h2>
        <button class="close-btn" @click="closeForm" aria-label="关闭">&times;</button>
      </header>

      <form @submit.prevent="handleSubmit" class="modal-form">
        <label>
          标题 <span class="required">*</span>
          <input type="text" v-model.trim="localPolicy.title" required />
        </label>

        <label>
          时间 <span class="required">*</span>
          <input type="date" v-model="localPolicy.date" required />
        </label>

        <label>
          级别
          <select v-model="localPolicy.level">
            <option value="" disabled>请选择级别</option>
            <option value="国家">国家</option>
            <option value="省级">省级</option>
            <option value="市级">市级</option>
            <option value="区级">区级</option>
          </select>
        </label>

        <label>
          相关度 (0~1)
          <input
            type="number"
            step="0.01"
            min="0"
            max="1"
            v-model.number="localPolicy.relevance"
            placeholder="如0.75"
          />
        </label>

        <label>
          描述
          <textarea v-model.trim="localPolicy.description" rows="4" placeholder="政策简要描述"></textarea>
        </label>

        <div class="form-actions">
          <button type="submit" class="btn-primary">{{ isEditMode ? '保存' : '新增' }}</button>
          <button type="button" class="btn-secondary" @click="closeForm">取消</button>
          <button
            v-if="isEditMode"
            type="button"
            class="btn-danger"
            @click="handleDelete"
          >
            删除
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, watch, computed } from 'vue'

const props = defineProps({
  policy: {
    type: Object,
    default: () => null,
  }
})

const emit = defineEmits(['close', 'save', 'delete'])

// 使用局部状态避免直接修改 props
const localPolicy = reactive({
  id: null,
  title: '',
  date: '',
  level: '',
  relevance: 0,
  description: ''
})

watch(() => props.policy, (newVal) => {
  if (newVal) {
    Object.assign(localPolicy, newVal)
    if (!localPolicy.relevance) localPolicy.relevance = 0
  } else {
    Object.assign(localPolicy, {
      id: null,
      title: '',
      date: '',
      level: '',
      relevance: 0,
      description: ''
    })
  }
}, { immediate: true })

const isEditMode = computed(() => !!localPolicy.id)

function closeForm() {
  emit('close')
}

function handleSubmit() {
  if (!localPolicy.title.trim()) {
    alert('标题不能为空')
    return
  }
  if (!localPolicy.date) {
    alert('时间不能为空')
    return
  }
  // 你可以加更复杂的验证

  // 发射保存事件，传递最新的政策对象
  emit('save', { ...localPolicy })
}

function handleDelete() {
  if (confirm('确定删除该政策吗？')) {
    emit('delete', localPolicy.id)
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal {
  background: var(--color-cardBg);
  color: var(--color-textPrimary);
  width: 400px;
  max-width: 90vw;
  border-radius: 12px;
  box-shadow: 0 0 15px var(--color-shadow);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1.4rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--color-textSecondary);
  cursor: pointer;
  transition: color 0.3s;
}

.close-btn:hover {
  color: var(--color-accentHover);
}

.modal-form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.modal-form input[type="text"],
.modal-form input[type="date"],
.modal-form input[type="number"],
.modal-form select,
.modal-form textarea {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-textPrimary);
  transition: border-color 0.3s;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="date"]:focus,
.modal-form input[type="number"]:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.required {
  color: var(--color-error);
  margin-left: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-primary {
  background: var(--color-accent);
  border: none;
  color: white;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: var(--color-accentHover);
}

.btn-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-textPrimary);
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-secondary:hover {
  background: var(--color-divider);
}

.btn-danger {
  background: var(--color-error);
  border: none;
  color: white;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-danger:hover {
  background: #b91c1c;
}
</style>
